<!-- 正在下载页面 -->
<template>
  <div>
    <div class="successTransfer" v-if="fileList && fileList.length > 0">
      <div class="tabHander">
        <div style="display: flex;height: 100%; align-items: center;">
          <!-- <div style="font-size: 14px;">下载总进度</div>
          <div class="progress">
            <a-progress :percent="parseFloat(allProgress)" :showInfo="false" strokeColor="#0273c4" trailColor="#e5e6ea" />
          </div> -->
        </div>
        <a-space>
          <a-button size="small" type="primary" @click="beginAllDownload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部开始</span>
          </a-button>
          <a-button size="small" type="primary" @click="pauseAllDownload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部暂停</span>
          </a-button>
          <a-button size="small" type="primary" @click="removeAllDownload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部取消</span>
          </a-button>
        </a-space>
      </div>
      <a-table size="small" rowKey="projectJobId" :columns="columns" :data-source="fileList" :show-header="false"
        :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'fileName'">
            <div>{{ text }}</div>
            <span class="text">{{ `${sizeFn(record)}` }}</span>
          </template>
          <template v-if="column.dataIndex === 'time'">
            <span class="textColor">
              {{ '12:00:01' }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'progress'">
            <a-progress :showInfo="false" :percent="parseFloat(text)" strokeColor="#0273c4" trailColor="#e5e6ea" />
            <span class="text">{{ speedFn(record) }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <div class="actionSty">
              <!-- 暂停 -->
              <a-tooltip placement="bottom" color="#666" v-if="record.state === 2" @click="pauseOrResume(record)">
                <template #title>
                  <span style="font-size: 12px;">暂停</span>
                </template>
                <pause-outlined />
              </a-tooltip>
              <!-- 开始下载 -->
              <a-tooltip placement="bottom" color="#666" v-else @click="pauseOrResume(record)">
                <template #title>
                  <span style="font-size: 12px;">开始</span>
                </template>
                <play-circle-outlined />
              </a-tooltip>
              <!-- 取消下载 -->
              <a-tooltip placement="bottom" color="#666" @click="cancelDownLoad(record)">
                <template #title>
                  <span style="font-size: 12px;">取消下载</span>
                </template>
                <close-outlined />
              </a-tooltip>
              <!-- 打开所在文件夹 -->
              <a-tooltip placement="bottom" color="#666" @click="openFileInFolder(record)">
                <template #title>
                  <span style="font-size: 12px;">打开所在文件夹</span>
                </template>
                <folder-outlined />
              </a-tooltip>
            </div>
          </template>
        </template>
      </a-table>

      <!-- 虚拟滚动表格 -->
      <!-- <recycle-scroller class="virtual-list" :buffer="1000" :prerender="200" style="height: 400px" :item-size="24"
        key-field="id" :items="fileList">
        <template v-slot="{ item, index }">
          <div class="list-item" :key="index">
            <span>{{ item.fileName }}</span>
          </div>
        </template>
      </recycle-scroller> -->

    </div>

    <!-- 没有传输任务 -->
    <div class="empty" v-else>
      <div class="centerfile">
        <img src="@/assets/images/empty-down.png" style="width: 200px;">
        <p>当前没有下载任务喔~</p>
      </div>
    </div>
  </div>
</template>

<script>
import { PlayCircleOutlined, CloseOutlined, PauseOutlined, FolderOutlined } from '@ant-design/icons-vue'
// import { byteHelper } from "@/utils/string"
import { message } from "ant-design-vue"
export default {
  name: 'downLoading',
  components: {
    PlayCircleOutlined,
    CloseOutlined,
    PauseOutlined,
    FolderOutlined
  },
  data() {
    return {
      columns: [
        {
          dataIndex: "fileName",
          width: 200,
        },
        // {
        //   dataIndex: "time",
        //   width: 100,
        //   align: "center",
        // },
        {
          dataIndex: "progress",
          width: 100,
        },
        {
          dataIndex: "action",
          width: 120,
          align: "center",
        },
      ],
      fileList: [],
      allProgress: 0, // 下载总进度
    }
  },
  methods: {
    // 全部开始
    beginAllDownload() {
      window.versions.beginAllDownload()
    },
    // 全部暂停
    pauseAllDownload() {
      window.versions.pauseAllDownload()
    },
    // 全部取消
    removeAllDownload() {
      window.versions.removeAllDownload()
    },
    // 打开文件所在路径
    async openFileInFolder(record) {
      const res = await window.versions.openFileInFolder(record.filePath)
      if (!res) message.warning("文件不存在，请下载文件")
    },
    // 下载速度
    speedFn(record) {
      let res
      switch (record.state) {
        case 1:
          res = '等待中'
          break;
        case 2:
          res = record.speed + '/s';
          break;
        case 3:
          res = '已暂停'
          break;
        case 4:
          res = '已完成'
          break
        case 5:
          res = '已取消'
          break;
        case 6:
          res = '已失败'
          break;
        case 7:
          res = '已重试'
          break;
      }
      return res
    },
    // 文件大小
    sizeFn(record) {
      // return byteHelper(record.receivedSize) + '/' + byteHelper(record.fileSize)
      return record.receivedSize + '/' + record.fileSize
    },
    // 点击开始下载(恢复下载) 或 点击暂停
    pauseOrResume(record) {
      console.log(record);
      window.versions.pauseOrResume(JSON.stringify(record))
    },
    // 取消下载
    async cancelDownLoad(record) {
      console.log(record);
      await window.versions.cancelDownLoad(JSON.stringify(record))
      this.getList()
    },
    // 获取下载列表
    async getList() {
      try {
        const res = await window.versions.getDownLoadList()
        console.log('getInit', JSON.parse(res))
        this.fileList = JSON.parse(res)
      } catch (error) {
        console.log('error', error);
      }
    },
    // 更新下载整个列表
    updateSendDataList() {
      window.versions.sendDataList(value => {
        console.log('getUpdate', JSON.parse(value))
        this.fileList = JSON.parse(value)
      })
    },
    // 更新下载项
    updateDownloadItem() {
      try {
        window.versions.updateDownLoadList((value) => {
          console.log(JSON.parse(value));
          const { downloadItem, parentObj } = JSON.parse(value)
          const index = this.fileList.findIndex(item => {
            if (item.children && item.children.length > 0) {
              const childIndex = item.children.findIndex(child => child.url === downloadItem.url)
              if (childIndex !== -1) {
                item.children[childIndex].fileSize = downloadItem.fileSize
                item.children[childIndex].receivedSize = downloadItem.receivedSize
                item.children[childIndex].speed = downloadItem.speed
                item.children[childIndex].progress = downloadItem.progress
                item.children[childIndex].state = downloadItem.state
              }
            }
            return item.projectJobId === parentObj.projectJobId
          })
          if (index !== -1) {
            this.fileList[index].fileSize = parentObj.fileSize
            this.fileList[index].receivedSize = parentObj.receivedSize
            this.fileList[index].speed = parentObj.speed
            this.fileList[index].progress = parentObj.progress
            this.fileList[index].state = parentObj.state
          }
        })
      } catch (error) {
        console.log('error', error);
      }
    },
    // 获取下载总进度
    getDownloadAllProgress() {
      window.versions.downloadAllProgress((value) => {
        console.log('allProgress', value);
        this.allProgress = value
      })
    },
    // 订阅所有事件
    subscribeEvents() {
      this.updateDownloadItem();
      this.updateSendDataList();
      // this.getDownloadAllProgress();
    },
    // 取消订阅所有事件
    unmountEvents() {
      window.versions.unmountDownLoadList()
    }
  },
  created() {
    this.getList()
    this.subscribeEvents();
  },
  beforeUnmount() {
    this.unmountEvents()
  },
}
</script>

<style scoped>
.text {
  font-size: 12px;
  color: #999;
}
</style>
